{% extends "base.html" %}
{% load display_tags %}
{% load static %}
{% block add_css %}
    <link rel="stylesheet" href="{% static "easymde/dist/easymde.min.css" %}">
{% endblock %}
{% block add_styles %}
    .editor-toolbar, .editor-statusbar, .editor-preview-side, .CodeMirror {
        width: 70% !important;
    }
  
    .chosen-container.chosen-container-multi {
        width: 70% !important;
    }
{% endblock %}

{% block content %}
<form class="form-horizontal" method="post">{% csrf_token %}
    <fieldset>
        {% block group_form %}
            <legend>Default Information</legend>
            {% include "dojo/form_fields.html" with form=form %}
        {% endblock group_form %}
    </fieldset>
    <fieldset>
        {% block global_role_form %}
            <legend>Global Role</legend>
            {% include "dojo/form_fields.html" with form=global_role_form %}
        {% endblock global_role_form %}
    </fieldset>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input class="btn btn-primary" type="submit" name="add_group" value="Submit"/>
        </div>
    </div>
</form>
{% endblock %}

{% block postscript %}
<script type="application/javascript" src="{% static "easymde/dist/easymde.min.js" %}"></script>
<script type="application/javascript">
    $(function () {
        $("textarea").each(function (index, elem) {
            if (elem.hasAttribute("required")) {
                elem.removeAttribute("required");
                elem.id = "req"
            }

            if(!$(elem).hasClass('select2-search__field')) {
                var mde = new EasyMDE({
                    spellChecker: false,
                    inputStyle: "contenteditable",
                    element: elem,
                    autofocus: false,
                    forceSync: true,
                    toolbar: ["bold", "italic", "heading", "|",
                        "quote", "unordered-list", "ordered-list", "|",
                        "link", "image", "|",
                        "table", "horizontal-rule", "code", "|",
                        "guide"
                    ]
                });
                mde.render();
            }
        });
    });
</script>
{% endblock %}
